<template>
	<view class="page">
		<navigator class="card" url="#" v-for="(article, id) in articles" :key="id">
				<view class="article" >
					<view class="head">
						<view class="user">
							<image :src="article.avatar" mode="aspectFit"></image>
							<view class="nickname">
								{{article.nickname}}
							</view>
						</view>
						<view class="time">
							{{article.time | ago}}
						</view>
					</view>
					<view class="body">
						<text class="text">
							{{article.content}}
						</text>
						<view class="imgs" :style="{justifyContent:article.imgs.length<=3?'space-between':'flex-start'}">
							<image :class="article.imgs.length==1?'one':'three'" :src="img.src" :mode="article.imgs.length==1?'widthFix':'aspectFit'" 
							v-for="(img, id) in article.imgs" :key="id" :data-index="id"
							show-menu-by-long-press @tap.stop="showImage($event, index)"
							></image>
						</view>
					</view>
					<view class="footer">
						<navigator url="">
							{{article.times.views}}浏览
						</navigator>
						<navigator url="">
							{{article.times.shares}}转发
						</navigator>
						<navigator url="">
							{{article.times.goods}}点赞
						</navigator>
					</view>
				</view>
			</navigator>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articles:[
					{
						avatar: "/static/icons/user.png",
						nickname: "和财政部",
						time: new Date(),
						content: `${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}`,
						imgs: [{
								src: "/static/logo.png"
							},
							{
								src: "/static/logo.png"
							},
							{
								src: "/static/logo.png"
							},
							{
								src: "/static/logo.png"
							},
							{
								src: "/static/logo.png"
							},
						],
						times:{
							views:0,
							shares:0,
							goods:0,
						}
					},
					{
						avatar: "/static/icons/user.png",
						nickname: "和财政部",
						time: new Date(),
						content: `${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}`,
						imgs: [{
								src: "/static/logo.png"
							}
						],
						times:{
							views:0,
							shares:0,
							goods:0,
						}
					}
				],
			}
		},
		computed: {
			
		},
		filters: {
			ago(time) {
				return time.toLocaleTimeString();
			}
		},
		created() {

		},
		methods: {
			showImage(evt, article, img) {
				uni.previewImage({
					urls: this.imgs.map(img => img.src),
					current: this.imgs[id],
				})
			},

		}
	}
</script>

<style scoped>
	.page{
		background-color: #C8C7CC;
	}
	
	.card{
		margin: 20upx 0;
	}
	
	.article {
		background-color: white;
	}

	.head {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.head image {
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		overflow: hidden;
		border: solid 1px black;
	}

	.head .user {
		display: flex;
		flex: row nowrap;
		align-items: center;
	}

	.head .nickname {
		color: gray;
		margin-left: 50upx;
	}

	.head .time {
		font-size: small;
	}

	.text {
		word-wrap: break-word;
		line-height: 1;
	}

	.imgs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		word-break: break-all;
	}

	.imgs .image {
		box-sizing: border-box;
	}
	
	.imgs .one{
		width:100%;
		height:auto;
		
	}

	.imgs .three {
		width: 230upx;
		height: 230upx;
		margin-right: 10upx;
		flex-grow: 1;
		flex-shrink: 1;
	}
	
	.footer{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		flex-grow: 1;
		flex-shrink: 1;
		justify-content: space-between;
		text-align: center;
	}

</style>
